<template>
    <div class="max-width">
        <h1>
            Json转为LoadRunnerJson字符串工具
        </h1>
        <div class="main">
            <kv label="Json">
                <el-input autosize v-model="json" chk="{value.length}(2)" placeholder="请输入Json"
                          type="textarea"></el-input>
            </kv>

        </div>
        <div class="main">
            <button @click="ok_click()">转换</button>
        </div>
        <pre v-html="result" class="res" ref="res"></pre>
    </div>

</template>

<script type="text/ecmascript-6">


    export default {
        data: function () {
            return {
                app_name: this.$route.params.name,
                json: "",
                result: ""
            }
        },
        mounted() {
            this.json = this.$my_store.getJson().json
        },
        methods: {

            ok_click() {
                if (this.chk() == false) return;
                this.$my_store.setJson({json: this.json});
                var toUnicode = (data) => {
                    if (data == '') return '';
                    return data.replace(/([\u4E00-\u9FA5]|[\uFE30-\uFFA0])/g, function (item) {
                        return "\\u" + item.charCodeAt(0).toString(16);
                    });
                };

                var json = eval("(()=>{ return " + this.json + " })()");
                jv.recursionJson(json, (k, v, o) => {
                    if (jv.isNull(v)) return;
                    if (v.Type == "string") {
                        o[k] = toUnicode(v);
                    }
                });

                this.result = "BODY=" + JSON.stringify(json).replace(/\"/g, "\\\"");

                this.$nextTick(() => {
                    var range = document.createRange();
                    range.selectNodeContents(this.$refs.res);
                    var selection = window.getSelection();
                    selection.removeAllRanges();
                    selection.addRange(range)
                });
            }
        }
    }
</script>

<style scoped>
    >>> .kv {
        margin: 10px;
        display: flex;
    }

    >>> .kv .k {
        display: inline-block;
        text-align: right;
        min-width: 160px;
    }

    >>> .kv .v {
        display: flex;
        flex: 1;
    }

    >>> .kv input {
        padding: 3px 5px;
        flex: 1;
    }

</style>
